Summary

Replaces @radix-ui/react-toast with sonner as the toast backend in ToastProvider. The public useToast().notify() API is unchanged, so no consumer files were touched.

Motivation

The previous setup used Radix Toast only as a thin shell — the queue and notify() API were hand-rolled, and only Toast.Root / Toast.Viewport were borrowed. Moving to sonner (a dedicated toast library) delegates that work to a more mature implementation and improves the user-facing behavior:

• Stacked toasts — the old Toast.Viewport laid toasts out in a flex-col with no cap, so firing several in a row filled the right side of the screen and covered page content (e.g. the partners column). sonner shows at most a few and collapses the rest into a stack (expanding on hover), so the screen is no longer buried.
• Mobile layout — the old viewport kept the fixed w-96 (384px) width on small screens, so on a 375px viewport toasts overflowed and the text was clipped, and multiple toasts stacked down the whole screen. sonner applies a mobile layout below 600px (full-width minus offsets), so toasts fit the viewport and no longer overflow.
• Enter/exit animations — the previous card had no data-[state] animation classes, so toasts appeared and disappeared abruptly. sonner animates them.
• Pause-on-hover — the auto-dismiss timer pauses while the pointer is over a toast, giving users time to read.
• Accessibility — sonner renders an aria-live="polite" region labeled Notifications with an Alt+T focus hotkey out of the box.

Preserved (unchanged)

Kept identical to the previous implementation so this is a drop-in swap:

• useToast().notify(content, options?) signature — same (React.ReactNode, { durationMs? }) => string, so all 19 consumer files are untouched.
• Default duration — options?.durationMs ?? 2500 (2500ms), same as before; consumers passing a custom durationMs still work.
• Visual style — same Tailwind classes for the toast card (rounded-md border ... dark:bg-gray-800 ...) and content (flex items-start gap-2), applied via sonner's unstyled + classNames.
• Placement — bottom-right with a 16px offset, matching the old fixed bottom-4 right-4 viewport.
• Swipe to dismiss — kept right-only via swipeDirections={['right']}, matching the old Radix swipeDirection="right" (sonner would otherwise also allow down-swipe at the bottom-right position).
• Dark mode — driven by useTheme().resolvedTheme.

Changes

• package.json: remove @radix-ui/react-toast, add sonner
• src/components/ToastProvider.tsx:
  • Replace the Radix Toast.Provider / Toast.Root / Toast.Viewport render tree with a single <Toaster />.
  • Drop the hand-rolled toast queue (toasts state, ToastItem type, removeToast); sonner manages the queue internally.
  • notify() now calls sonner's toast() while keeping the same signature and default 2500ms duration.
  • Set position="bottom-right", offset={16}, gap={8}, and swipeDirections={['right']} to match the previous viewport placement and swipe behavior.

AS-IS

Light (Several clicked)

Dark (Several clicked)

Mobile

TO-BE

Light (Several clicked)

Hover mode

Dark (Several clicked)

Hover mode

Mobile

Mobile (Several clicked)

Mobile (Several clicked and clicked specipic item)

Notes

• Net change: +35 / -70 lines — queue management is now delegated to sonner.

Summary by CodeRabbit

• New Features
  • Upgraded in-app toast notifications to the newer toast experience with improved theme awareness and consistent bottom-right placement.
  • Toasts now use a duration setting (defaulting to 2500ms) and return a notification ID from the notify action.
• Bug Fixes
  • Simplified toast handling to reduce issues with overlapping notifications and improve overall reliability.